<template>
  <div>
    <h1>课程大纲</h1>
    <el-button type="primary" size="medium" @click="showAddChapterClick">添加章节</el-button>

    <div>

      <ul>
        <li v-for="chapter in chapterList" :key="chapter.id">
          <div class="chapter-parent">
            <div>
              {{chapter.title}}
            </div>
            <div class="btns">
              <el-button type="primary" size="mini" @click="toUpdateChapter(chapter.id)">修改章节</el-button>
              <el-button type="warning" size="mini" @click="toDeleteChapter(chapter.id)">删除章节</el-button>
              <el-button type="primary" size="mini">添加小节</el-button>
            </div>
          </div>
          <ul>
            <li v-for="video in chapter.videos" :key="video.id">
              <div class="video">
                <div>
                  <span>{{video.title}}</span>
                  <el-tag v-if="video.videoSourceId == null" type="primary" size="mini">暂无视频</el-tag>
                </div>
                <div class="btns">
                  <el-button type="primary" size="mini">添加视频</el-button>
                  <el-button type="warning" size="mini">删除</el-button>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>

    </div>

    <div class="bottom-sty">
      <el-button @click="nextStep">下一步</el-button>
    </div>

    <el-dialog
      :title="addAndUpdateChapter.id == null? '添加章节':'修改章节'"
      :visible.sync="addAndUpdateChapterDialogVisible"
      width="40%"
      :before-close="addAndUpdateChapterDialogHandleClose">

      <el-form ref="addAndUpdateChapterForm" :model="addAndUpdateChapter" :rules="addAndUpdateChapterRules" label-width="80px">
        <el-form-item label="章节名称" prop="title" required>
          <el-input v-model="addAndUpdateChapter.title"></el-input>
        </el-form-item>
        <el-form-item label="排  序" prop="sort">
          <el-input-number v-model="addAndUpdateChapter.sort" :min="0"></el-input-number>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addAndUpdateChapterDialogHandleClose(null)">取 消</el-button>
        <el-button type="primary" @click="addAndUpdateChapterClick">{{addAndUpdateChapter.id == null? '添加章节':'修改章节'}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

  import * as ChapterAPI from '../../../api/chapter'

  export default {
    name: 'CourseOutlineAdd',
    data: function() {

      return {

        chapterList:[],
        addAndUpdateChapterDialogVisible:false,
        addAndUpdateChapter:{
            id: null,
            courseId: this.$parent.courseId,
            title: '',
            sort: 0
        },
        addAndUpdateChapterRules:{
          title:[{ required: true, message: '请输入章节名称', trigger: 'blur' }]
        }
      }
    },
    created:function() {

      this.loadChapterList();
    },
    methods: {

       nextStep(){

        this.$emit('stepAction',1);
      },
      preStep() {

        this.$emit('stepAction',-1);
      },
      async loadChapterList() {

        this.chapterList = await ChapterAPI.chapterListByCourseId(this.$parent.courseId);
        console.log(this.chapterList)
      },
      addAndUpdateChapterDialogHandleClose(done) {

        this.addAndUpdateChapterDialogVisible = false;
        this.$refs.addAndUpdateChapterForm.resetFields();
      },
      showAddChapterClick() {

         this.addAndUpdateChapterDialogVisible = true;
      },
      addAndUpdateChapterClick() {

        this.$refs.addAndUpdateChapterForm.validate((valid) => {
          if (valid) {

          //

            if (this.addAndUpdateChapter.id == null) {

               this.addChapter();

            } else {

               this.updateChapter();
            }



          } else {


            return false;
          }
        });

      },
      toDeleteChapter() {


      },
      async toUpdateChapter(chapterId) {

        this.addAndUpdateChapter = await ChapterAPI.findChapterById(chapterId);
        this.addAndUpdateChapterDialogVisible = true;

      },
      async addChapter() {


         await ChapterAPI.addChapter(this.addAndUpdateChapter);
         this.addAndUpdateChapterDialogVisible = false;
         this.loadChapterList();
      },
      async updateChapter() {

        await ChapterAPI.updateChapter(this.addAndUpdateChapter);
        this.addAndUpdateChapterDialogVisible = false;
        this.loadChapterList();
      }
    }
  }
</script>

<style scoped>

  .bottom-sty{

    text-align: center;
  }

  ul{
    margin: 10px;
  }

  .chapter-parent{

    height: 60px;
    margin: 30px;
    padding: 0px 20px;
    line-height: 60px;
    position: relative;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .chapter-parent .btns,.video .btns{

    position: absolute;
    right: 10px;
    top: -3px;
  }

  .video{

    height: 50px;
    margin: 10px 50px 10px;
    padding-left:20px;
    line-height: 50px;
    position: relative;
    border: 1px dashed #ccc;
  }



  .el-tag{
    margin-left: 10px;
  }
</style>
